<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
  <script src="https://unpkg.com/vue"></script>

</head>

<body>
  <div id="root"></div>
  <script>
    /* 
      1. 组件的理解与拆分
        - 把一个网页拆分成不同的组件进行维护
      2. Vue.createApp({}) 创建实例，根组件
      3. 创建两个子组件示例
      4. 多个计数器组件间互不影响
        - 组件可被复用
        - 组件内的数据是独立维护的，不共享
      5. 组件可嵌套使用
      6. 通过app.component()方式定义的组件，即便没使用，也仍占用内存空间
        - 一直挂载在app实例上
      7. 全局组件vs局部组件
        - 全局组件 app.component()
        - 局部组件 components属性
      8. vue中组件命名的规则
        - 定义组件时使用大驼峰
        - 使用组件时使用-横岗，小写
    */
    const counter = {
      data() {
        return {
          count: 1
        }
      },
      template: `<div>
      <p>{{count}}</p>
      <button @click="count++" >增加</button> 
    </div>`
    }
    const app = Vue.createApp({
      components: {
        counter
      },
      template: `<div>
        <counter />
        <counter />
        <counter />  
      </div>`
    })

    const vm = app.mount('#root');
  </script>
</body>

</html>